<template>
  <div class="pagination-outer">
    <a
      @click="changeCurrentPage(currentPage - 1)"
      href="javascript:;">
      &lt;
    </a>
    <a
      @click="changeCurrentPage(1)"
      href="javascript:;"
      v-show="currentPage >= 4">
      1
    </a>
    <a
      href="javascript:;"
      v-show="currentPage >= 5">
      ...
    </a>
    <a
      @click="changeCurrentPage(beforePage1)"
      v-if="currentPage >= 1"
      href="javascript:;"
      :class="{ current: currentPage == 1 }">
      {{ beforePage1 }}
    </a>
    <a
      @click="changeCurrentPage(beforePage2)"
      v-if="currentPage >= 2"
      href="javascript:;"
      :class="{ current: currentPage == 2 }">
      {{ beforePage2 }}
    </a>
    <a
      @click="changeCurrentPage(midPage)"
      v-if="currentPage >= 3"
      href="javascript:;"
      :class="{ current: currentPage >= 3 && currentPage <= lastPage - 2 }">
      {{ midPage }}
    </a>
    <a
      @click="changeCurrentPage(afterPage1)"
      v-if="currentPage >= 4"
      href="javascript:;"
      :class="{ current: currentPage == lastPage - 1 }">
      {{ afterPage1 }}
    </a>
    <a
      @click="changeCurrentPage(afterPage2)"
      v-if="currentPage >= 5"
      href="javascript:;"
      :class="{ current: currentPage == lastPage }">
      {{ afterPage2 }}
    </a>
    <a
      href="javascript:;"
      v-show="lastPage - currentPage >= 4">
      ...
    </a>
    <a
      @click="changeCurrentPage(lastPage)"
      href="javascript:;"
      v-show="lastPage - currentPage >= 3">
      {{ lastPage }}
    </a>
    <a
      @click="changeCurrentPage(currentPage + 1)"
      href="javascript:;">
      &gt;
    </a>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import useStore from '@/store'
const { searchStore } = useStore()
const changeCurrentPage = (page: number) => {
  if (page > 0 && page < lastPage.value) {
    searchStore.changePagition(page)
  }
}
const currentPage = computed(() => searchStore.pagination.currentPage)

const beforePage1 = computed(() =>
  currentPage.value >= 3 ? midPage.value - 2 : 1
)

const beforePage2 = computed(() =>
  currentPage.value >= 3 ? midPage.value - 1 : 2
)

const midPage = computed(() =>
  currentPage.value >= 3
    ? currentPage.value <= lastPage.value - 2
      ? currentPage.value
      : lastPage.value - 2
    : 3
)

const afterPage1 = computed(() =>
  currentPage.value <= lastPage.value - 2
    ? midPage.value + 1
    : lastPage.value - 1
)

const afterPage2 = computed(() =>
  currentPage.value <= lastPage.value - 1 ? midPage.value + 2 : lastPage.value
)

const lastPage = computed(() => Math.ceil(searchStore.pagination.total / 20))
</script>

<style lang="less" scoped>
.pagination-outer {
  height: 30px;
  padding: 15px 0;
  text-align: center;
  .current {
    background-color: #757575;
    color: #fff;
  }
  a {
    display: inline-block;
    width: 48px;
    height: 24px;
    padding: 3px 0;
    margin: 0 5px;
    font-size: 18px;
    font-weight: 200;
    line-height: 24px;
    color: #b0b0b0;
    &:hover {
      background: #b0b0b0;
      color: #fff;
    }
  }
}
</style>
